<template>
    <div class="jianzhuForm">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="上级建筑" prop="parentId">
                        <treeSelect
                            :treeProps="props"
                            :options="treeSelectList"
                            v-model="form.parentId"
                            :clearable="isClearable"
                            :accordion="isAccordion"
                            :expandNode="false"
                            size="small"
                            width="100%"
                            @getValue="getValue($event)"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="建筑名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="建筑编号" prop="no">
                        <el-input v-model="form.no"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="建筑面积" prop="area">
                        <el-input v-model="form.area"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="排序序号" prop="xh">
                        <el-input type="number" v-model="form.xh"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付商户" prop="shanghu">
                        <el-select v-model="form.shanghu" placeholder="请选择支付商户" style="width: 100%">
                            <el-option label="支付商户1" value="shanghai"></el-option>
                            <el-option label="支付商户2" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="所属系统" prop="system">
                        <el-select v-model="form.system" placeholder="请选择所属系统" style="width: 100%">
                            <el-option label="电控" value="shanghai"></el-option>
                            <el-option label="电控2" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="描述" prop="remark">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {LeftTree} from '@/mockData/monitorCenter.js'
import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
export default {
    name: 'jianzhuForm',
    components: {treeSelect},
    props: ['formData'],
    data() {
        return {
            rules: {
                parentId: [
                    {required: true, message: '请选择上级建筑', trigger: ['blur', 'change']}
                    // {min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"}
                ],
                name: [{required: true, message: '建筑名称不能为空', trigger: ['blur', 'change']}],
                no: [{required: true, message: '建筑编号不能为空', trigger: ['blur', 'change']}],
                area: [{required: true, message: '建筑面积不能为空', trigger: ['blur', 'change']}]
            },
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: [],
            form: {
                parentId: '',
                name: '',
                no: '',
                area: '',
                xh: '',
                shagnhu: '',
                system: '',
                remark: ''
            }
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.initData()
        })
    },
    methods: {
        cancel() {
            this.$emit('close', '')
        },
        initData() {
            console.log('value....')
            // let treeData = LeftTree
            // let listData = Utility.arrayFlat(treeData, (t) => t.children)
            // treeData = Utility.arrayCascade(listData, (c, p) => c.parentId == p.id)
            this.treeSelectList = LeftTree
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        },
        onSubmit() {
            let that = this
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    console.log('111')
                    that.$emit('close', '')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.jianzhuForm {
}
</style>
